<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>饼状图</title>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>  
	<script src = "http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	
	<!-- 	<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/echarts/3.8.4/echarts-en.js"></script> -->
</head>
	<style>
		#container0{
			width: 500px;
			height:500px;
			
		}

	</style>
<body>
	<div id="container0"></div>

	<script>
		var dom = $("#container0")[0];
        var myChart = echarts.init(dom);
		var option = {
		    title : {
		        text: '某站点用户访问来源',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    // tooltip : {
		    //     trigger: 'item',
		    //     formatter: "{a} <br/>{b} : {c} ({d}%)"

		    // },
		    tooltip : {
                            trigger: 'item',
                            showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                            hideDelay: 500,            // 隐藏延迟，单位ms
                            transitionDuration : 0.4,  // 动画变换时间，单位s
                            formatter: "{b}: {c}(亿) ({d}%)<br>今日增量：0<br>最近7日增量：0<br>最近一个月增量：0<br>",
                       },
		    legend: {
		        orient : 'vertical',//horizontal,水平

		        //小图标位置
		       // x : 'left',//right,center
		        //y :"bottom",//center,top,
		        top: '70px',
               
                left: '20px',
		        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },

		    //工具栏
		    // toolbox: {
		    //     show : true,
		    //     feature : {
		    //         mark : {show: true},
		    //         dataView : {show: true, readOnly: false},
		    //         magicType : {
		    //             show: true, 
		    //             type: ['pie', 'funnel'],
		    //             option: {
		    //                 funnel: {
		    //                     x: '25%',
		    //                     width: '50%',
		    //                     funnelAlign: 'left',
		    //                     max: 1548
		    //                 }
		    //             }
		    //         },
		    //         restore : {show: true},
		    //         saveAsImage : {show: true}
		    //     }
		    // },
		    calculable : true,
		    series : [
		        {
		        	hoverAnimation:false,//hover动画开关
		        	 selectedMode: 'single',//选中时的状态
		            name:'访问来源',
		            type:'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ]
		        }
		    ]
		};
        if (option && typeof option === "object") {
                    myChart.setOption(option, true)
        }         
	</script>
</body>
</html>